<template>
  <MyHeader> </MyHeader>
  <div style="margin-top: 50px">
    <el-row>
      <el-col :span="6">

      </el-col>
      <el-col :span="18">
        <h3> 操作 {{tag}}</h3>
      </el-col>
      <el-col :span="6">

      </el-col>
    </el-row>

    <main class="page-content has-sidebar">
      <el-row>
        <!--    左边导航栏-->
        <el-col :span="4" class="menu-col">
          <LiftMenu  id="liftMenu" tag_content="mo ren"  @get_new_tag="get_new_tag"  @select_tag="select_tag"/>
        </el-col>

        <!--    右边显示表单-->
        <el-col :span="20">

          <el-row>
            <el-col :span="3">
            </el-col>
            <el-col :span="18">
              <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="tag中文">
                  <el-input v-model="form.cnName"></el-input>
                </el-form-item>
                <el-form-item label="tag类型">
                  <el-input v-model="form.clazz"></el-input>
                  <!--              <el-select v-model="form.region" placeholder="请选择活动区域">-->
                  <!--                <el-option label="区域一" value="shanghai"></el-option>-->
                  <!--                <el-option label="区域二" value="beijing"></el-option>-->
                  <!--              </el-select>-->
                </el-form-item>

                <el-form-item label="额外信息">
                  <el-input type="textarea" v-model="form.massage"></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button @click="onSubmit">立即提交</el-button>
                  <el-button @click="onEX">取消</el-button>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="3">
            </el-col>
          </el-row>

        </el-col>

      </el-row>
    </main>

    <el-footer>

    </el-footer>
  </div>
</template>

<script>
import {inject} from 'vue'
import LiftMenu from "@/components/LeftMenu"
import {useRoute} from 'vue-router';
import axios from 'axios'
import MyHeader from "@/components/MyHeader"
import $cookies from "vue-cookie";
export default {
  data() {
    return {
      myBaseURL: inject('$baseURL'),
      tag: this.query.tag,
      isLogin: false,
      refresh_carder:1,
      refresh: true,
      form: {
        cnName: '',
        clazz: '',
        massage: '',
      }
    }
  },
  name: "SetTag",
  components: {
    LiftMenu,
    MyHeader
  },
  methods: {
    onSubmit() {
      // console.log(this.form.cnname);
      // console.log(this.form.clazz);
      // console.log(this.form.massage);
      if(this.isLogin !== "true")
      {
          this.$message.error('请先登录！');//alert("请先登录！")
        return;
      }
      const token = $cookies.get("token")
      axios({
        method:'post',
        url:'/tag/set',
        baseURL:this.myBaseURL,
        //responseType:'json',
        params:{
          tagName: this.tag,
          cnName: this.form.cnName,
          clazz: this.form.clazz,
          message: this.form.massage
        },
        headers: {
          "Content-Type": "multipart/form-data",
          "User-Token": token,
        }
      }).then(response => {
        print(response.data)
        if(response.data === 1)
            this.$message.success('提交成功！');//alert("提交成功！")
        else
            this.$message.error('提交失败！');//alert("提交失败！")
      })

      console.log('submit!');
    },
    gotoSetTagPage: function (tag){
      this.$router.push({path: '/SetTag',query:{ tag: tag }} )
      this.goBack() // 通过报错 阻止执行下一级的触发函数
    },

    select_tag:function (tag){
      //接收到子组件传来的tag
      console.log("接收到子组件传来的tag")
      console.log(tag)
      this.tag = tag[0]
      // 跳转
      this.gotoSetTagPage(tag[0])
    },
    onEX:function(){
      this.form.cnName = ""
      this.form.clazz = ""
      this.form.massage = ""
    }
  },
  watch: {
    '$route' () {
      console.log("执行了watch '$route'监听函数 tag:" + this.tag)
    }
  },
  mounted() {
    //this.getLoginState()
    const islogin = $cookies.get("isLogin")
    console.log(islogin)
    this.isLogin = islogin
  },
  setup(){
    const route = useRoute() //获取到值
    console.log("执行了setup函数")
    let query = route.query;
    let setup_tag = route.query.tag
    //console.log(route.query.tag)
    return {
      query,
      setup_tag
    }
  }
}
</script>

<style scoped>

</style>
